<template>
	<view class="function-layout">

		<view class="top-head" v-if="resData" @click="setDeviceNameAndHead">
			<view class="left">
				<view class="headImg" v-if="resData.headUrl">
					<image :src="resData.headUrl" mode="aspectFill"></image>
				</view>
				<view class="headImg" v-else>
					<image :src="imagePath" mode="aspectFill"></image>
				</view>
				<view class="devicename" v-if="resData.dvName">
					{{resData.dvName}}
				</view>
				<view class="devicename" v-else>
					去设置
				</view>
			</view>

			<view class="right-arrow" v-if="resData.bindMode == 2">
				<uni-icons type="right"></uni-icons>
			</view>
		</view>


		<view class="list" v-if="resData">
			<navigator hover-class="none" :url="'/pages/function/deviceInfo?data=' + JSON.stringify(resData)">
				<view class="item">
					<view class="left">
						<view class="item-icon">
							<image class="icon-img" src="../../static/function_list/function_devinfo.png"
								mode="aspectFill"></image>
						</view>
						<view class="item-title">
							{{$t('function.function_deviceInfo')}}
						</view>
					</view>
					<view class="right">
						<uni-icons type="right"></uni-icons>
					</view>
				</view>
			</navigator>

			<view class="item" v-if="resData.bindMode == 2" @click="setSOS">
				<view class="left">
					<view class="item-icon">
						<image class="icon-img" src="../../static/function_list/function_sos.png" mode="aspectFill">
						</image>
					</view>
					<view class="item-title">
						{{$t('function.function_SOS')}}
					</view>
				</view>
				<view class="right">
					<uni-icons type="right"></uni-icons>
				</view>
			</view>

			<view class="item" v-if="showSmart">
				<view class="left">
					<view class="item-icon">
						<image class="icon-img" src="../../static/function_list/function_smartag.png" mode="aspectFill">
						</image>
					</view>
					<view class="item-title">
						{{$t('function.function_smart')}}
					</view>
				</view>
				<view class="right rightContent" @click="changeAuto">
					<view class="model">
						{{smartStatus}}
					</view>
					<uni-icons type="right"></uni-icons>
				</view>
			</view>
			<navigator hover-class="none" url="/pages/subscribe/subscribe" v-if="resData.bindMode == 2">
				<view class="item">
					<view class="left">
						<view class="item-icon">
							<image class="icon-img" src="../../static/function_list/function_sucribe.png"
								mode="aspectFill"></image>
						</view>
						<view class="item-title">
							{{$t('function.function_subcribe')}}
						</view>
					</view>
					<view class="right">
						<uni-icons type="right"></uni-icons>
					</view>
				</view>
			</navigator>
			<navigator hover-class="none" url="/pages/function/person-location">
				<view class="item">
					<view class="left">
						<view class="item-icon">
							<image class="icon-img" src="../../static/function_list/function_weizhi.png"
								mode="aspectFill"></image>
						</view>
						<view class="item-title">
							{{$t('function.function_location')}}
						</view>
					</view>
					<view class="right">
						<uni-icons type="right"></uni-icons>
					</view>
				</view>
			</navigator>

			<view class="item" v-if="resData.bindMode == 2" @click="shareDevice">
				<view class="left">
					<view class="item-icon">
						<image class="icon-img" src="../../static/function_list/function_share.png" mode="aspectFill">
						</image>
					</view>
					<view class="item-title">
						{{$t('function.function_share')}}
					</view>
				</view>
				<view class="right">
					<uni-icons type="right"></uni-icons>
				</view>
			</view>

			<view class="item" @click="showStyleSheet">
				<view class="left">
					<view class="item-icon">
						<image class="icon-img" src="../../static/function/function_trackStyle.png" mode="aspectFill">
						</image>
					</view>
					<view class="item-title">
						{{$t('function.trackStyle')}}
					</view>
				</view>
				<view class="right rightContent">
					<view class="style">
						{{style}}
					</view>
					<uni-icons type="right"></uni-icons>
				</view>
			</view>

			<!-- navigator hover-class="none" url="/pages/function/help-center">
					<view class="item">
						<view class="left">
							<view class="item-icon">
								<image class="icon-img" src="../../static/function_list/function_help.png"
									mode="aspectFill"></image>
							</view>
							<view class="item-title">
								{{$t('function.function_help')}}
							</view>
						</view>
						<view class="right">
							<uni-icons type="right"></uni-icons>
						</view>
					</view>
				</navigator> -->
			<navigator hover-class="none" :url="'/pages/function/device_upgrade?data=' + JSON.stringify(resData)">
				<view class="item">
					<view class="left">
						<view class="item-icon">
							<image class="icon-img" src="../../static/function_list/function_refresh.png"
								mode="aspectFill"></image>
						</view>
						<view class="item-title">
							{{$t('function.function_upgrade')}}
						</view>
					</view>
					<view class="right">
						<uni-icons type="right"></uni-icons>
					</view>
				</view>
			</navigator>

			<view class="item" v-if="resData.bindMode == 2" @click="setSafeArea">
				<view class="left">
					<view class="item-icon">
						<image class="icon-img" src="../../static/function_list/function_anquanquyu.png"
							mode="aspectFill"></image>
					</view>
					<view class="item-title">
						{{$t('function.function_safeArea')}}
					</view>
				</view>
				<view class="right">
					<uni-icons type="right"></uni-icons>
				</view>
			</view>

			<view class="item" v-if="resData.bindMode == 2" @click="setTrackerMode">
				<view class="left">
					<view class="item-icon">
						<image class="icon-img" src="../../static/function_list/function_mode.png" mode="aspectFill">
						</image>
					</view>
					<view class="item-title">
						{{$t('function.function_mode')}}
					</view>
				</view>
				<view class="right rightContent">
					<view class="model">
						{{getMode(resData.mode)}}
					</view>
					<uni-icons type="right"></uni-icons>
				</view>
			</view>

			<view class="item" @click="sendCommand">
				<view class="left">
					<view class="item-icon">
						<image class="icon-img" src="../../static/function_list/function_find.png" mode="aspectFill">
						</image>
					</view>
					<view class="item-title">
						{{$t('function.function_find')}}
					</view>
				</view>
				<view class="right">
					<uni-icons type="right"></uni-icons>
				</view>
			</view>

			<navigator hover-class="none" url="/pages/function/unbinding-device" v-if="resData.bindMode == 2">
				<view class="item">
					<view class="left">
						<view class="item-icon">
							<image class="icon-img" src="../../static/function_list/function_unbind.png"
								mode="aspectFill"></image>
						</view>
						<view class="item-title">
							{{$t('function.Unbinding')}}
						</view>
					</view>
					<view class="right">
						<uni-icons type="right"></uni-icons>
					</view>
				</view>
			</navigator>


			<view class="bg_space" v-if="resData.bindMode == 1">

			</view>
		</view>

		<nodata class="no_data" :isAdd="true" v-else>
			<template v-slot:custom>
				{{$t('function.chooseDeviceHint')}}
			</template>
		</nodata>

		<custom-modal v-model="showModal" title="提示" content="该设备尚未开通服务,请先去开通" confirmText="去开通"
			confirm-bg-color="#53786C" confirm-color='#fff' @confirm="onConfirm" @cancel="onCancel"
			:showCancelButton="true" />

	</view>
</template>

<script setup>
	import {
		apiDeviceSendCmd,
		apiGetDeviceInfo
	} from '../../api/device_api'

	import {
		i18nTool
	} from '../../utils/i18en';
	import {
		getImei,
		getStyle,
		trackPlayStyle
	} from '../../utils/user_tools';

	import {
		onLoad,
		onShow,
		onHide
	} from "@dcloudio/uni-app";
	import {
		ref,
		computed,
		watch
	} from 'vue';
	import store from '../../store';
	import {
		isIOSPlatFrom
	} from '../../utils/system';
	import CustomModal from '@/components/custom-modal/custom-modal.vue';

	var showModal = ref(null)
	var param = {};
	var resData = ref(null);
	var imei = ref(null);
	var style = ref(null);
	var findResult = ref(null);
	var timeOut = null;
	var smartStatus = ref("未开启");
	var showSmart = ref(false)
	const imagePath = ref("../../static/device/upload_head.png")

	onLoad(() => {


	})

	findResult.value = computed(() => store.getters.findId)

	watch(findResult.value, (newVal, oldVal) => {
		uni.hideLoading();
		if (timeOut) {
			clearTimeout(timeOut);
		}
		uni.showToast({
			title: i18nTool("function.cmdSendSuc"),
			icon: 'none'
		})
	}, {
		deep: true
	})


	function onConfirm() {

		uni.navigateTo({
			url: "/pages/subscribe/subscribe?data=" + imei.value
		})

		// 处理确定逻辑
	}

	function onCancel() {
		console.log('点击了取消')
		// 处理取消逻辑
	}
	//修改设备头像
	function setDeviceNameAndHead() {
		if(resData.value.bindMode == 2){
			if(resData.value.subscribed == 0){
				showModal.value = true
			}else{
				uni.navigateTo({
					url: "/pages/function/device-name-head"
				})
			}
		}
	}
	//sos设置
	function setSOS() {
		if (resData.value.subscribed == 0) {
			showModal.value = true
		} else {
			uni.navigateTo({
				url: "/pages/function/sos-list"
			})
		}
	}

	function shareDevice() {
		if (resData.value.subscribed == 0) {
			showModal.value = true
		} else {
			uni.navigateTo({
				url: "/pages/function/share_list"
			})
		}
	}

	function setSafeArea() {
		if (resData.value.subscribed == 0) {
			showModal.value = true
		} else {
			uni.navigateTo({
				url: "/pages/function/device-safearea-list"
			})
		}
	}

	function setTrackerMode() {
		if (resData.value.subscribed == 0) {
			showModal.value = true
		} else {
			uni.navigateTo({
				url: "/pages/function/set-device-mode"
			})
		}


	}



	onShow(() => {

		imei.value = getImei();
		if (imei.value) {
			param.imei = imei.value;
			getDeviceInfo();
		}
		style.value = getTrackStyle(trackPlayStyle());
		uni.setNavigationBarTitle({
			title: i18nTool("function.navTitle"),
		})
	})
	onHide(() => {
		if (timeOut) {
			clearTimeout(timeOut);
		}
	})
	async function sendCommand() {
		let param = {
			imei: imei.value,
			cmd: "FIND",
		}
		let res = await apiDeviceSendCmd(param);
		if (res.status == 0) {
			uni.showLoading({
				title: 'Loading...',
				mask: true
			})
			timeOut = setTimeout(function() {
				uni.hideLoading();
				uni.showToast({
					title: i18nTool('function.cmdSendFail'),
					icon: "none"
				})
			}, 10000);
		}
	}
	async function getDeviceInfo() {
		let res = await apiGetDeviceInfo(param);
		resData.value = res.content;
		if (resData.value.bindMode == 2 && isIOSPlatFrom()) {
			showSmart.value = true;
			if (resData.value.stag == 0) {
				smartStatus.value = "未开启"
			} else {
				smartStatus.value = "已开启"
			}
		} else {
			showSmart.value = false;
		}

		if (resData.value.subscribed == 0 && resData.value.bindMode == 2) {
			showModal.value = true
		}

	}

	function getMode(mode) {
		if (mode == 0) {
			return i18nTool("function.allTrack")
		} else if (mode == 1) {
			return i18nTool("function.normal")
		} else if (mode == 2) {
			return i18nTool("function.weak")
		}
	}
	async function changeAuto() {
		
		if (resData.value.stag == 1) {
			uni.showToast({
				title: "smart已开启",
				icon: "none"
			})
			return
		}
		let param = {
			imei: imei.value,
			cmd: "OPTAG",
			params: "1",
		}

		let res = await apiDeviceSendCmd(param);
		if (res.status == 0) {
			uni.hideLoading();
			uni.showToast({
				title: i18nTool("function.cmdSendSuc"),
				icon: 'none'
			})
			smartStatus.value = "已开启";
			uni.setStorageSync(imei.value + "smart", smartStatus.value);

		} else {
			uni.hideLoading();
			uni.showToast({
				title: res.msg,
				icon: "none"
			})

		}
	}

	function showStyleSheet() {
		uni.showActionSheet({
			title: i18nTool("function.trackStyle"),
			itemList: [i18nTool("function.styleLine"), i18nTool("function.styleDot")],
			success: function(res) {
				uni.setStorageSync(imei.value, res.tapIndex + 1);
				style.value = getTrackStyle(trackPlayStyle());
			},
			fail: function(res) {

			}
		});

	}

	function getTrackStyle(style) {
		if (style == 1) {
			return i18nTool('function.styleLine')
		} else if (style == 2) {
			return i18nTool('function.styleDot')
		} else {
			return i18nTool('function.styleLine')
		}
	}
</script>

<style lang="scss" scoped>
	.function-layout {
		background-color: #f1f1f1;
		padding: 20rpx 20rpx;

		.top-head {

			background-color: #fff;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 30rpx 20rpx;
			border-radius: 20rpx;

			.left {
				display: flex;
				align-items: center;
				justify-content: start;

				.headImg {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;

					image {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}

				.devicename {
					padding-left: 10rpx;
					font-size: 28rpx;
					font-weight: bold;
					color: #333;
				}
			}

			.right-arrow {}

		}

		.list {
			padding: 10rpx 0rpx;
			background-color: #f1f1f1;

			.item {
				padding: 30rpx 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-radius: 20rpx;
				margin: 20rpx 0;
				background-color: #fff;

				.left {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.item-icon {
						width: 46rpx;
						height: 46rpx;

						.icon-img {
							width: 100%;
							height: 100%;
						}
					}

					.item-title {
						font-size: 30rpx;
						padding-left: 20rpx;
					}
				}

				.rightContent {
					display: flex;
					align-items: center;
					justify-content: start;
					font-size: 26rpx;
					color: #666;
				}

			}

			.bg_space {
				background-color: #f1f1f1;
				height: 400rpx;
			}

		}

		// }

		.no_data {
			width: 100%;
			height: 100%;
		}
	}
</style>